<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<c:set var="webContext" value="${pageContext.request.contextPath}" />
<sec:authorize access="isAuthenticated()" var="isAuthenticated" />
<sec:authentication property="name" var="userName" />

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
<meta charset="ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home | Evory</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet"
	href="${webContext}/resources/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${webContext}/resources/css/bootstrap-responsive.min.css">
<link rel="stylesheet"
	href="${webContext}/resources/css/font-awesome.min.css">
<link rel="stylesheet" href="${webContext}/resources/css/main.css">
<link rel="stylesheet" href="${webContext}/resources/css/sl-slide.css">
<link rel="stylesheet" href="${webContext}/resources/css/styles.css">
<link href="http://vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">

<!-- Le fav and touch icons -->
<link rel="shortcut icon"
	href="${webContext}/resources/images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="${webContext}/resources/images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="${webContext}/resources/images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="${webContext}/resources/images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed"
	href="${webContext}/resources/images/ico/apple-touch-icon-57-precomposed.png">
	
<script src="${webContext}/resources/js/vendor/jquery-1.9.1.min.js"></script>
</head>

<body>

	<!--Header-->
	<header class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
				</a> <a id="logo" class="pull-left" href="${webContext}/"></a>
				<div class="nav-collapse collapse pull-right">
					<ul class="nav">
						<c:choose>
							<c:when test="${isAuthenticated}">
								<li id="mnuHome" onclick="changeMenuActive(this)">
									<a href="${webContext}/">Home</a>
								</li>
								<li id="mnuNosotros" onclick="changeMenuActive(this)">
									<a href="${webContext}/nosotros">Nosotros</a>
								</li>
								<li id="mnuCursos" onclick="changeMenuActive(this)">
									<a href="${webContext}/cursos">Cursos</a>
								</li>
								<li id="mnuForo">
									<a href="${webContext}/blog">Foro</a>
								<li id="mnuMisCursos" class="mnuAuntenticated" onclick="changeMenuActive(this)">
									<a href="${webContext}/private/user/workspace">Mis Cursos</a>
								</li>
								<li id="mnuMundo3D" class="mnuAuntenticated" onclick="changeMenuActive(this)">
									<a href="${webContext}/private/user/mundo3d">Mundo 3D</a>
								</li>
								<li id="mnuClassOnline" class="mnuClassOnline" onclick="changeMenuActive(this)">
									<a href="${webContext}/private/user/claseOnline">Clase Online</a>
								</li>
								<li>
									<a href="#">Bienvenido(a)! ${userName}</a>
								</li>
								<li>
									<a href="${webContext}/logout" style="color: red;">Cerrar Sesión</a>
								</li>
							</c:when>
							<c:otherwise>
								<li id="mnuHome" onclick="changeMenuActive(this)">
									<a href="${webContext}/">Home</a>
								</li>
								<li id="mnuNosotros" onclick="changeMenuActive(this)">
									<a href="${webContext}/nosotros">Nosotros</a>
								</li>
								<li id="mnuServicios">
									<a href="${webContext}/servicios">Servicios</a>
								</li>
								<li id="mnuCursos">
									<a href="${webContext}/cursos">Cursos</a>
								</li>
								<li id="mnuForo">
									<a href="${webContext}/blog">Foro</a>
								</li>
								<li id="mnuRegistrate">
									<a href="${webContext}/registro">Registrate</a>
								</li>
								<li id="mnuContactanos">
									<a href="${webContext}/contacto">Contactanos</a>
								</li>
								<li class="login">
									<a data-toggle="modal" href="${webContext}/login"><i class="icon-lock"></i></a>
								</li>
							</c:otherwise>
						</c:choose>

					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</header>
	<!-- /header -->